<template>
	<view>
		<view class="content" v-if="showShop">
			<scroll-view class="menu-wrapper" scroll-y :style="'height:'+height+'px'">
				<view ref="menuWrapper">
					<!--  :class="{'current': currentIndex == index}" @click="selectMenu(index,$event)" -->
					<view style="position: relative;" v-for="(item,index) in goods" :key="index" ref="menuList" @click="select(index)"
					 :class="{'current': currentIndex == index}">
						<view class="menu-item">{{item.name}}</view>
						<text class="allcount" v-if="getAllCount>=item.count&&item.count>0">{{item.count}}</text>
						<!-- <text class="allcount">1</text> -->
					</view>
				</view>
			</scroll-view>
			<!--  @scroll="scroll" -->
			<scroll-view class="foods-wrapper" scroll-y :style="'height:'+height+'px'" :scroll-top="foodSTop">
				<view ref="foodsWrapper">
					<view ref="foodList" class="foods" v-for="(item, i) in goods" :key="i">
						<view class="food-title" style="background: #f3f5f7">
							{{item.name}}
						</view>
						<view class="food margin_top_20" v-for="(food, index) in item.foods" :key="index">
							<image :src="food.thumb" mode="" style="width: 120rpx;height: 120rpx;border-radius: 10rpx;"></image>
							<view class="food-info">
								<text style="font-size: 28rpx;margin-top: 2px;">{{food.name}}</text>
								<!-- 加减 -->
								<view class="food-btm margin_top_20">
									<text class="food-price">￥{{food.jiage}}</text>
									<cartcontrol :food="food" @add="addCart" @dec="decreaseCart" @jiesuanFun="jiesuanFun"></cartcontrol>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<shopcart :goods="goods" @add="addCart" @dec="decreaseCart" @delAll="delAll" @jiesuanFun="jiesuanFun"></shopcart>
		</view>
		<view v-if="showjiesuan">

			<view class="title_txt">商品明细</view>
			<view class="list-content padding_30" v-for="(item,index) in jiesuanList">
				<view class="flex space alcenter">
					<view class="flex">
						<image :src="item.thumb" mode="" style="width: 80rpx;height: 80rpx;border-radius: 10rpx;"></image>
						<view class="ml10">
							<view>{{item.name}}</view>
							<view class="mt5">x{{item.count}}</view>
						</view>
					</view>
					<view style="color: #FF0000;">￥{{item.jiage}}</view>
				</view>
			</view>
			<view class="mH10"></view>
			<view class="title_txt">订单金额</view>
			<view class="flex space padding_30 list-content">
				<view>消费金额：{{AllPrice}}</view>
				<!-- <view>折扣：9折</view> -->
			</view>
			<view class="flex space padding_30 list-content">
				<!-- <view>下单时间：15:00</view> -->
				<view class="ftw600" style="color: #FF0000;">需支付：{{AllPrice}}</view>
			</view>
			<view class="mH10"></view>
			<view class="title_txt" v-if="huiyuanka">会员卡信息</view>
			<view class="flex space padding_30 list-content" v-if="huiyuanka">
				<view>会员卡：{{huiyuanka.name}}</view>
				<view>享受折扣：{{huiyuanka.zhekou*100}}折</view>
			</view>

			<view style="height: 150rpx;"></view>
			<view class="action-btn-group">
				<button type="primary" class="action-btn" @click="sao_ka()">扫描会员卡</button>
				<button type="primary" class="action-btn" @click="add_order()">去支付</button>
			</view>
			<view class="trea-mask" @click="closebuy" v-if="kuang"></view>
			<view class="buy-trea" v-if="yudingpopup">
				<view class="text">请将二维码出示给用户</view>
				<image class="margin_top_20" src="http://app.icekun.com/attachment/images/3/2020/07/lT33lxLD2tDz52J2L15Idi3D2yPd4t.jpg" mode=""></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	import shopcart from '@/components/shopcart.vue';
	import cartcontrol from '@/components/cartcontrol.vue'
	import Vue from 'vue'

	export default {
		data() {
			return {
				title: 'Hello',
				goods: [
				],
				height: 0,
				foodSTop: 0,
				currentIndex: 0,
				jiesuanList:[],
				AllPrice:0,
				showShop:false,
				showjiesuan:false,
				huiyuanka:'',
				ka_hao:'',
				orderlist:[],
				srcUrl:'',
				kuang:false,
				yudingpopup:false,
				jin:1
			}
		},
		components: {
			shopcart,
			cartcontrol
		},
		onLoad() {
			this.showShop = true
			this.height = Number(uni.getSystemInfoSync().windowHeight) - 55;
			// console.log(uni.getSystemInfoSync().windowHeight)
			this.global.request.post({
				data: {
					do: 'shangjia_manage',
					op:'daxiadan_goods'
				},
				success: res => {
					this.goods = res
					// this.goods[1].foods = res
				}
			})
		},
	
		computed: {
			getList() {
				let result = [];
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {

						if (food.count) {
							result.push(food)
						}
					})
				})
				return result

			},
			// 获得购物车所有商品数量
			getAllCount: function(item) {
				// console.log('item', item)
				let result = [];
				let count = 0;

				for (let i = 0; i < this.goods.length; i++) {
					count = 0;
					this.goods[i].foods.forEach((food) => {

						// console.log('food',food);
						if (food.count >= 0) {
							count += food.count
							Vue.set(this.goods[i], 'count', count)
						}
					})
					// console.log('result', count);
					result.push(count)
				}

				result.sort(function(a, b) {
					return a - b;
				})
				count = result[result.length - 1]
				// console.log('result', count);
				return count;
			},

		},
		methods: {
			//关闭弹窗
			closebuy: function() {
				this.yudingpopup = false
				this.kuang = false
			},
			sao_ka(){//扫描后，获取到会员卡号信息
				uni.scanCode({
				    scanType: ['qrCode'],
				    success: function (res) {
				        console.log('条码内容：' + res.result);
						return
						this.global.request.post({
							data: {
								do: 'shangjia_manage',
								op:'sou_ka',
								ka_hao:res.result
							},
							success: res => {
								this.huiyuanka = res
							}
						})
				    }
				});
			},
			add_order(){
				for(var i=0;i<this.jiesuanList.length;i++){
					var obj = {}
					obj.id = this.jiesuanList[i].id
					obj.count = this.jiesuanList[i].count
					this.orderlist.push(obj)
				}
				// 1提交订单 2 清空之前购物车？  3.请求生成二维码,并弹窗显示
				
				if(this.jin ==1){
					this.jin = 0
					this.global.request.post({
						data: {
							do: 'shangjia_manage',
							op:'add_order',
							ka_hao:this.ka_hao,
							//商品id和数量，放一数组传过来。
							orderlist:JSON.stringify(this.orderlist)
						},
						success: res => {
							this.jin = 1
							this.global.request.post({
								data: {
									do: 'hbCode',
									path:'/path/order/info',//完了增加个订单详情页，在用户端
									id:res.o_id,//订单id
								},
								success: ress => {
									this.srcUrl = 'http://app.icekun.com/attachment/images/3/2020/07/lT33lxLD2tDz52J2L15Idi3D2yPd4t.jpg'
									this.yudingpopup = true
									this.kuang = true
								}
							})
						}
					})
				}

				
				
			},
			// 点击侧边栏
			select(index) {
				this.currentIndex = index;
				this.setScrollH(index);

			},

			// 设置点击侧边栏右边滚动的高度
			setScrollH: function(index) {
				var that = this;
				let height = 0;
				var query = uni.createSelectorQuery();
				// console.log('query',query);
				let foods = query.selectAll('.foods');
				// console.log('foods', foods);

				this.$nextTick(function() {
					foods.fields({
						size: true
					}, data => {
						if (index == 0) {
							that.foodSTop = 0;
						}
						for (let i = 0; i < index; i++) {

							height += parseInt(data[i].height);
							// console.log('fh', foods);
							that.foodSTop = height;
							// console.log(that.foodSTop)
						}

					}).exec();
				})

			},
			
			addCart: function(item) {
				// console.log('ev', JSON.stringify(item))
				if (item.count >= 0) {
					item.count++
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.name == food.name)
								food.count = item.count
						})
					})
					// console.log('c++', JSON.stringify(item))

				} else {
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.name == food.name)
								Vue.set(food, 'count', 1)
							// food.count = 1
							// console.log('add-shop', JSON.stringify(food))
						})
					})
				}

			},
			decreaseCart(item) {
				if (item.count) {
					item.count--
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.name == food.name)
								food.count = item.count
							// console.log('dec-shop', JSON.stringify(this.foods))
						})
					})
				}
			},
			// 清空购物车
			delAll() {
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {
						if (food.count) {
							food.count = 0
							// console.log(JSON.stringify(food));
						}
					})
				})
			},
			jiesuanFun(getlist,getAllPrice){
				this.showShop = false
				this.showjiesuan = true
				this.AllPrice = getAllPrice
				this.jiesuanList = JSON.parse(getlist)
				
			}
		}
	}
</script>

<style lang="scss">
	.content {
		/* text-align: center; */
		/* height: 400upx; */
		display: flex;
		position: absolute;
		top: 0;
		bottom: 110rpx;
		width: 100%;
		overflow: hidden;
	}

	.current {
		position: relative;
		z-index: 0;
		background-color: #fff;
		color: $uni-themd;
	}

	.menu-wrapper {
		text-align: center;
		width: 22%;
		display: flex;
		flex-direction: column;
		background: #f3f5f7;

	}

	.menu-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
	}

	.allcount {
		position: absolute;
		right: 12rpx;
		top: 16rpx;
		display: inline-block;
		padding: 0 8rpx;
		font-size: 18rpx;
		line-height: 32rpx;
		font-weight: 400;
		border-radius: 50%;
		background-color: #f01414;
		color: #ffffff;
	}

	.foods-wrapper {
		margin-left: 8rpx;
		width: 78%;
		padding-bottom: 40rpx;
	}

	.food,
	.food-btm,
	.content {
		display: flex;
		flex-direction: row;
	}

	.food-title {
		padding: 4rpx 0;
	}

	.food-info {
		margin-left: 20rpx;
		margin-right: 32rpx;
		display: flex;
		flex-direction: column;
		flex: 2;
	}

	.food-btm {
		justify-content: space-between;
	}

	.food-price {
		color: $uni-themd;
		font-size: 30rpx;
	}
	.title_txt {
		padding: 30rpx;
		font-weight: 600;
	}
	
	.title_txt::before {
		content: '';
		border: $uni-themd solid 1px;
		border-width: 1px 5px 0 0;
		margin-right: 20rpx;
	}
	.list-content{
		border-top: 1px solid #F0F0F0;
	}
	.mH10{
		width: 100%;
		height: 20rpx;
		background: #F0F0F0;
	}
	.action-btn-group {
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		justify-content: space-around;
		align-items: center;
		width:92%;
		display: flex;
		height: 76upx;
		border-radius: 100px;
		overflow: hidden;
		box-shadow: 0 20upx 40upx -16upx #fa436a;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
		background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c);
		&:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 50%;
			transform: translateY(-50%);
			height: 28upx;
			width: 0;
			border-right: 1px solid rgba(255, 255, 255, 0.5);
		}
	
		.action-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 180upx;
			height: 100%;
			font-size: 30upx;
			padding: 0;
			border-radius: 0;
			background: transparent;
		}
	}
	.buy-trea{
		position: fixed;
		top: 30%;
		left: 20%;
		width: 60%;
		padding: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		z-index: 997;
		// transform: translate3d(0, 120%, 0);
		transition: all .3s cubic-bezier(.25, .5, .5, .9);
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.trea-mask {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 994;
	}
	.buy-trea image{
		margin-bottom: 20rpx;
		width: 300rpx;
		height: 300rpx;
	}
</style>
